<template>
  <div>
    <Dialog
      v-model="dialogVisible"
      :title="t('annualFee.缴纳年费')"
      width="800px"
      @confirm="handleConfirm"
      @close="handleClose"
    >
      <el-form
        :inline="true"
        :model="form"
        ref="formRef"
        class="search-form"
        :rules="rules"
      >
        <el-form-item :label="t('annualFee.缴纳年限') + '：'" prop="ruleId">
          <el-select
            v-model="form.ruleId"
            :placeholder="t('annualFee.请选择')"
            style="width: 320px"
          >
            <el-option
              v-for="item in ruleList"
              :key="item.id"
              :label="`${item.duration}${t('annualFee.年')} ${item.fee}${t('annualFee.元')}`"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="t('annualFee.支付凭证') + '：'" prop="ruleId">
          <UploadFile v-model="form.payProof" :limit="5" />
        </el-form-item>
      </el-form>
    </Dialog>
  </div>
</template>

<script setup>
import { ref, watch, onMounted, reactive } from "vue";
import { useI18n } from "vue-i18n";
import Dialog from "@/components/dialog.vue";
import UploadFile from "@/components/UploadFile.vue";
import moment from "moment";
import Api from "@/config/api/api";
import { ElMessage } from "element-plus";

const { t } = useI18n();

const tentInfo = ref(Storage.get("user", true));
const dialogVisible = defineModel();
const emit = defineEmits(["success"]);
const ruleList = ref([]);
const formRef = ref();
const form = ref({
  ruleId: "",
  payProof: [],
});
const rules = reactive({
  ruleId: [{ required: true, message: t('annualFee.请选择缴纳年限'), trigger: "change" }],
  payProof: [{ required: true, message: t('annualFee.请上传支付凭证'), trigger: "change" }],
});
watch(
  () => dialogVisible.value,
  (newVal) => {
    if (newVal) {
      tentInfo.value = Storage.get("user", true);
    }
  }
);

const handleConfirm = () => {
  formRef.value.validate(async (valid, fields) => {
    if (valid) {
      Api.tenantRenewAdd({
        ruleId: form.value.ruleId,
        payImage: form.value.payProof?.map((v) => v.url)?.join(","),
      }).then((res) => {
        if (res.status === 200) {
          ElMessage.success(t('annualFee.已提交审核'));
          emit("success");
          handleClose();
        }
      });
    }
  });
};

const handleClose = () => {
  form.value = {
    ruleId: "",
    payProof: [],
  };
  dialogVisible.value = false;
};

const getRuleList = async () => {
  const res = await Api.tenantRenewRule({ page: 0, size: 1000 });
  ruleList.value = res?.data?.content || [];
};

onMounted(() => {
  getRuleList();
});
</script>
<style lang="scss" scoped>
.w-100 {
  width: 100px;
  text-align: right;
}

.ml100 {
  margin-left: 100px;
}
</style>
